CSS レイアウトの歴史
ページ全体のレイアウトを組む技術の変遷
floatを使う
2006年にページ全体のレイアウトの一種である聖杯レイアウトを組む方法が提案された float属性ではコンテンツをあるセクションの左か右に配置することしか指定できないため、他のセクションにあるコンテンツの高さを推測する手段がCSSにはないのです。この問題に対する直接的な解決法は、何年もあとにFlexboxベースのレイアウトが登場するまで見つかりませんでした。 2009年提案、2015年ごろブラウザ実装
単一の列や行に対して空間の配分方法を定義する目的で設計された属性
ページ全体のレイアウト向けではない
floatを用いる方式よりもレイアウトの定義に向く
ページ全体のレイアウトをする際の欠点
ブラウザサポートがまだ薄い
<div class="container">をマークアップに追加する必要があること
「CSSを用いてレイアウトを組む際にはHTMLマークアップを全く変更しなくていい」というのが理想
最大の欠点は、CSSのコード自体です。flexboxを用いるとfloat方式での数々のテクニックは不要なものの、レイアウトを定義するにしてはコードの表現が自明ではありません。flexboxのCSSを読み解いて全ての要素がページにどう配置されるかを視覚的につかむことが難しいため、flexboxベースレイアウトを書く際には推測とチェックを重ねる必要があるのです。
複数の行や列のあるレイアウトを扱うための特別な仕様が別途開発されることとなりました。CSSグリッドと呼ばれる仕様です。
2011年提案
利点
flexboxの欠点の1つだった、元のHTMLを変更する必要がなくなった
レイアウトの表現がコードから想像しやすい